<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas考试</title>
</head>
<style>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<body>

    <div class="wrapper">
        <div class="item">
            <div>第一题</div>
            <canvas id="canvas-1" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第二题</div>
            <canvas id="canvas-2" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第三题</div>
            <canvas id="canvas-3" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第四题</div>
            <canvas id="canvas-4" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
       		<input type="button" name="" id="ha" value="放大" />
        </div>
        <div class="item">
            <div>第五题</div>
            <canvas id="canvas-5" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <div>
                <input type="button" value="红" id="red">
                <input type="button" value="黄" id="yellow">
                <input type="button" value="蓝" id="blue">
                <input type="button" value="下载" id="download">
            </div>
        </div>
        <div class="item">
            <div>第六题</div>
            <canvas id="canvas-6" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        	<input type="button" name="" id="hei" value="黑白" />
        </div>
    </div>
    
</body>
<script>
    window.onload = function() {

		let canvas1 = document.getElementById("canvas-1")
		let pen1 = canvas1.getContext("2d");
		pen1.fillStyle="#99FF99";	
		pen1.arc(30,30,30,0,Math.PI/180*360,false);
		pen1.fill();
		pen1.fillRect(60,30,30,30);
		pen1.beginPath();
		//50,50
		pen1.lineWidth=10;
		pen1.moveTo(125,100);
		pen1.lineTo(275,100);
		pen1.arcTo(300,100,300,125,25);
		pen1.lineTo(300,175);
		pen1.arcTo(300,200,275,200,25);
		pen1.lineTo(125,200);
		pen1.arcTo(100,200,100,175,25);
		pen1.lineTo(100,125);
		pen1.arcTo(100,100,125,100,25);
		pen1.stroke()

		let canvas2 = document.getElementById("canvas-2")
		let pen2 = canvas2.getContext("2d");
		pen2.arc(30,30,30,0,Math.PI/180*360,false);
		pen2.stroke();
		pen2.rect(60,30,50,50)
		pen2.stroke();
		pen2.beginPath();
		pen2.moveTo(100,100);
		pen2.lineTo(200,100);
		pen2.lineTo(100,200);
		pen2.lineTo(100,100);
		pen2.stroke();
		
		let canvas3 = document.getElementById("canvas-3")
		let pen3 = canvas3.getContext("2d");
		timer = setInterval(function(){
						let x=150,
							y=150,
							width=50,
							height=50;
						
							pen3.translate(x + width/2,y + height/2);
							pen3.rotate(Math.PI/180*30);
							pen3.translate(-(x+width/2),-(y+height/2));
							pen3.clearRect(0,0,500,500);
							
							pen3.fillRect(x,y,width,height);
						
						
					},200);
					
					
					
		let canvas4 = document.getElementById("canvas-4")
		let pen4 = canvas4.getContext("2d");
		let fangda = document.getElementById("ha");
		
		pen4.fillRect(100,100,100,100);
		fangda.onclick=function(){
			pen4.fillRect(100,100,100,100);
			min(100,100,100,100,1.5,1.5,"yellow");
			
			
			//参数：X坐标位置，Y坐标位置，X轴方向长度，Y轴方向长度，
			//	X方向缩小比例，X方向缩小比例，变换后颜色(默认原色)
			function min(x,y,w,h,sx,sy,color){
				//移动的是原点坐标（旋转中心）
				pen4.translate(x+w/2,y+h/2);
				pen4.scale(sx,sy);
//				pen4.fillStyle=color;
				pen4.translate(-(x+w/2),-(y+h/2));
				pen4.fillRect(x,y,w,h);
			
			}
		
		}
		
		let canvas6 = document.getElementById("canvas-6")
		let pen6 = canvas6.getContext("2d");
		
		var image = new Image();
			image.src = 'img1.jpg'
			let x=0;
			image.onload = function(){
				pen6.drawImage(image,0,0,300,300);
				var imgData = pen6.getImageData(0,0,300,300)
				var data = imgData.data;
				//console.log(data);
				
					/*for(var i=0;i<data.length;i+=4){
						var average=(data[i+0]+data[i+1]+data[i+2]+data[i+3])/3;
						data[i+0] += average;
						data[i+1] += average;
						data[i+2] += average;
					}*/
					
					for(var i=0;i<data.length;i+=4){
						var grayscale=data[i]*0.3+data[i+1]*0.6+data[i+2]*0.1;
						data[i+0] = grayscale;
						data[i+1] = grayscale;
						data[i+2] = grayscale;
					}
					//pen6.putImageData(imageData,0,0);
					
				let hei=document.getElementById("hei");	
				hei.onclick=function(){
					if(x==0){
						
					
					//pen6.clearRect(0,0,300,300);
					pen6.putImageData(imgData,0,0);
						x=1;
					}
					else{
						alert("已变色~~~");
					}
				}
				
			}	
				
		let canvas5 = document.getElementById("canvas-5")
		let pen5 = canvas5.getContext("2d");
			let yel=document.getElementById("yellow");
				yel.onclick=function(){
					pen5.beginPath();
					pen5.strokeStyle="yellow"
					
				}
				
			let red=document.getElementById("red");
				red.onclick=function(){
					pen5.beginPath();
					pen5.strokeStyle="red"
					
				}
				
						let bul=document.getElementById("blue");
				bul.onclick=function(){
					pen5.beginPath();
					pen5.strokeStyle="blue"
					
				}
					
		document.onmousedown = function(e){
				
		
				pen5.moveTo((e.pageX-canvas5.offsetLeft),(e.pageY-canvas5.offsetTop))
					document.onmousemove = function(e){
					
				
				
							pen5.lineTo((e.pageX-canvas5.offsetLeft),(e.pageY-canvas5.offsetTop))
							pen5.stroke();
					}
				
			}
		
			
				document.onmouseup = function(e){
					document.onmousemove=null;
				}
		
				
			let downloa=document.getElementById("download");
				downloa.onclick=function(){
				
					downLoad(saveAsPNG(canvas5));
					function downLoad(url){
					    var oA = document.createElement("a");
					    oA.download = '';// 设置下载的文件名，默认是'下载'
					    oA.href = url;
					    document.body.appendChild(oA);
					    oA.click();
					    oA.remove(); // 下载之后把创建的元素删除
					}
					function saveAsPNG(canvas) {
					    return canvas.toDataURL("image/png");
					}
					
				}
				
				



				
		
    }
</script>
</html>